<div id="tb<?php echo $uniqid;?>" style="padding-top: 20px">
	<el-form :model="form" ref="form" method="post" :rules="formValidateRules" size="small" label-width="140px" @submit.native.prevent label-position="right">
		<el-form-item label="提货卡名称：" prop="name">
			<el-input v-model="form.name" size="small" style="width: 500px"></el-input>
		</el-form-item>
		<el-form-item label="提货卡类型：" required>
			<el-select v-model="form.type" size="small" placeholder="请选择提货卡类型" popper-class="zindex_popper" popper-append-to-body="false" style="width: 500px">
				<el-option label="代金券" value="cash"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="提货卡面值：" prop="amount">
			<el-input type="number" autocomplete="off" size="small" v-model.number="form.amount" :min="10" step="100" style="width: 200px; text-align: right;">
				<template slot="append">元</template>
			</el-input>
		</el-form-item>
		<el-form-item label="提货卡描述：">
			<el-input type="textarea" :autosize="{minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="form.description" size="small" style="width: 500px"></el-input>
		</el-form-item>
		<el-form-item label="发放起止时间：" prop="startend_time">
			<el-date-picker
				v-model="form.startend_time"
				type="datetimerange"
				:picker-options="pickerOptions"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				:default-time="['00:00:00', '23:59:59']"
				format="yyyy年MM月dd日 HH时mm分ss秒"
				value-format="yyyy-MM-dd HH:mm:ss"
				align="right"
				size="small"
				style="width: 500px"
				popper-class="zindex_popper">
			</el-date-picker>
		</el-form-item>
		<el-form-item label="提货卡有效期：">
			<el-input type="number" size="small" v-model.number="form.valid_day" placeholder="提货卡发放后多长天内有效，0表示永不过期" :min="0" style="width: 200px; text-align: right;">
				<template slot="append">天</template>
			</el-input>
		</el-form-item>
		<el-form-item label="有效期起止时间：">
			<el-date-picker
					v-model="form.valid_time"
					type="datetimerange"
					:picker-options="pickerOptions"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:default-time="['00:00:00', '23:59:59']"
					format="yyyy年MM月dd日 HH时mm分ss秒"
					value-format="yyyy-MM-dd HH:mm:ss"
					align="right"
					size="small"
					style="width: 500px"
					popper-class="zindex_popper">
			</el-date-picker>
		</el-form-item>
		<el-form-item label="提货卡商品：" prop="goods_ids">
			<el-input type="hidden" v-model="form.goods_ids" style="display: none;"></el-input>
			<el-button type="primary" @click="goodsSelect" size="small" style="width: 110px;">选择商品</el-button>
			<template>
				<el-table :data="goodsInfoList" border empty-text="请选择商品" style="width: 100%; margin-top: 10px;" stripe="true" header-cell-style="text-align:center; padding: 5px 0;" cell-style="padding: 5px 0;">
					<el-table-column label="商品信息" width="420">
						<template slot-scope="scope">
							<div style="display: flex">
								<div style="width: 32px; display: flex; align-items: center;">
									<img style="width: 30px; height: 30px; border-radius: 5px; border:1px solid #eee; overflow: hidden;" :src="scope.row.image">
								</div>
								<div style="width: calc(100% - 42px); text-align: left;">
									{{scope.row.title}}
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" type="danger" @click="goodsRemove(scope.$index, scope.row)">移除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</el-form-item>
	</el-form>
	<div id="pickgoodscardadddlg" class="easyui-dialog" style="width:700px; height:580px;" title="信息框" closed="true"></div>
</div>

<script>
	var pickgoodscardAddVM = new Vue({
		el: '#tb<?php echo $uniqid;?>',
		data: {
			pickgoodscardId: '<?php echo addslashes($pickgoodscard_id);?>',
			form:{
				name:'',
				type:'cash',
				amount:0,
				valid_day:0,
				startend_time:[],
				valid_time:[],
				description: '',
				goods_ids:[],
			},
			goodsInfoList:[],
			formValidateRules:{
				name: [
					{ required: true, message: '请输入提货卡名称'},
					{ min: 3, max: 50, message: '提货卡名称长度必须在3-50个字符之间', trigger: 'blur' }
				],
				amount: [
					{ required: true, message: '提货卡面值不能不空'},
				],
				startend_time: [
					{type: 'array', required: true, message: '请选择提货卡领取起止时间！', trigger: ['blur','change']},
				],
				goods_ids:[
					{type: 'array', required: true, message: '请选择提货卡适用商品！', trigger: 'change'},
				],
			},
			pickerOptions: {
				shortcuts: [{
					text: '未来1周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '未来1个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '未来3个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						end.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '未来6个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						end.setTime(start.getTime() + 3600 * 1000 * 24 * 180);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '未来12个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						end.setTime(start.getTime() + 3600 * 1000 * 24 * 365);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '未来2年',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						end.setTime(start.getTime() + 3600 * 1000 * 24 * 365 *2);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '未来3年',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						end.setTime(start.getTime() + 3600 * 1000 * 24 * 365 *3);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '未来5年',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						end.setTime(start.getTime() + 3600 * 1000 * 24 * 365 *5);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
		},
		created: function () {
			if(this.pickgoodscardId && this.pickgoodscardId != '0'){
				let that = this;
				$.post('/admin/pickgoodscard/edit', {id:this.pickgoodscardId,mode:'info'}, function (response) {
					if (response.ret === 0) {
						that.form = response.data.info;
						that.form.amount = parseFloat(that.form.amount).toFixed(2);
						that.goodsInfoList = response.data.goodsList;
						if(!Array.isArray(response.data.info.goods_ids)){
							that.form.goods_ids =  Object.values(response.data.info.goods_ids);
						}
						if(that.form.goods_ids.length){
							for (let i = 0; i < that.form.goods_ids.length; i++){
								that.form.goods_ids[i] = parseInt(that.form.goods_ids[i]);
							}
						}
					} else {
						$.messager.alert('提示', response.msg, 'warning');
						$("#pickgoodscarddlg").dialog('close');
					}
				}, 'json');
			}
		},
		filters: {
			formatDate(nS){
				return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			updateVMData() {
				this.$forceUpdate();
			},
			init: function () {

			},
			goodsSelect:function (){
				$("#pickgoodscardadddlg").dialog({
					title: '选择商品',
					closed: false,
					width: 800,
					height:638,
					cache: false,
					href: '/admin/pickgoodscard/getgoods',
					modal: true,
					buttons:[{
						text:'确定',
						id:'pickgoodscardAddGoodsSelectSubmit',
						iconCls:'icon-ok',
					},{
						text:'关闭',
						iconCls:'icon-no',
						handler:function(){
							$("#pickgoodscardadddlg").dialog('close');
						}
					}]
				});
			},
			pickgoodscardAddSubmit:function (){
				let that = this;
				this.$refs['form'].validate((valid) => {
					if (valid) {
						let postData = that.form;
						if(!postData.amount){
							$.messager.alert('提示', '面值没有设置','warning');
							return false;
						}else{
							postData.gettime_start = postData.startend_time[0];
							postData.gettime_end = postData.startend_time[1];
							delete postData.startend_time;
							postData.validtime_start = postData.valid_time[0];
							postData.validtime_end = postData.valid_time[1];
							delete postData.valid_time;
							let postMode = 'add';
							if(that.pickgoodscardId && that.pickgoodscardId != '0'){
								postMode = 'edit';
								postData.id = that.pickgoodscardId;
								postData.mode = 'submit';
							}
							$.post('/admin/pickgoodscard/'+postMode, postData, function (data) {
								if (data.ret === 0) {
									$.messager.show({
										title: '提示',
										msg: data.msg,
										timeout: 3000,
										showType: 'slide'
									});
									$("#pickgoodscarddlg").dialog('close');
									pickgoodscardReload();
								} else {
									$.messager.alert('提示', data.msg, 'warning');
								}
							}, 'json');

						}
					} else {
						return false;
					}
				});
			},
			goodsRemove: function (index, rowData) {
				if(this.form.goods_ids.length > 1){
					if(index > -1 && rowData.id === this.form.goods_ids[index]){
						this.goodsInfoList.splice(index, 1);
						this.form.goods_ids.splice(index, 1);
					}
				}else{
					$.messager.alert('提示', '最少需要保留1个商品！','warning');
				}
			},
		}
	});
	$('#pickgoodscardaddsubmit').click(function(){
		pickgoodscardAddVM.pickgoodscardAddSubmit();
	})
</script>
<style>
	.zindex_popper{
		z-index: 20000 !important;
	}
</style>